<template>
	<!-- 店铺 -->
	<view style="background: #F8F8F8;">
		<view class="head">
			<view class="item flex">
				<image :src="shop.shop_cover?url+shop.shop_cover:'/static/logo.png'" mode=""></image>
				<view class="text_div">
					<view class="food_name flex justify-between">
						<text class="align-end flex">{{shop.shop_name||'城邦小店'}}</text>
						<text class="state align-start flex"
							:class="{state1:shop.open_status !=='营业中'}">{{shop.open_status}}</text>
					</view>
					<view class="score">
						<text class="cuIcon-favorfill"></text>
						<text class="num"
							style="margin: 0 10rpx;">{{shop.star.length>2?shop.star:shop.star+'.0'}}</text>
						<text class="time">营业时间：{{shop.start_open_time||'无'}}</text>
					</view>
					<view class="phone flex align-center" @click="$utils.callphone(shop.phone)">
						<text class="">联系电话：{{shop.contact_phone}}</text>
						<text class="cuIcon-phone" style="font-size: 30rpx;margin-left: 10px;"></text>
					</view>
					<view class="address">地址：{{shop.shop_province+shop.shop_city+shop.shop_district+shop.shop_address}}
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" class="food_list">
			<view v-for="(item,index) in list" :key="index" class="food_list_item" @click="handleNavigeta(item.id)">
				<view class="solid"></view>
				<view class="flex  div">
					<image :src="url + item.main_images[0]" mode=""></image>
					<view class="text_div">
						<view class="food_name">{{item.name}}</view>
						<view class="food_num">库存：{{item.sku.spec_list[0].item_list[0].stock||item.service.stock}} |
							评价：{{item.sales}}</view>
						<view class="button flex-c">
							{{item.sku.spec_list[0].item_list[0].item_name||item.service.items[0].name}}</view>
						<view class="price">原价￥{{item.sku.spec_list[0].item_list[0].price||item.service.price}}</view>
						<view class="vipPrice flex align-center" style="white-space: nowrap;">
							<text>会员价:￥{{item.sku.spec_list[0].item_list[0].vip_price||item.service.vip_price}}</text>
							<text class="jifen" style="white-space: nowrap;"
								v-if="item.sku.spec_list[0].item_list[0]['100_point_deduct_amount']&&item.sku.spec_list[0].item_list[0]['100_point_deduct_amount']!=0">
								{{item.sku.spec_list[0].item_list[0].point_deduct_max_amount/(item.sku.spec_list[0].item_list[0]['100_point_deduct_amount']/100)}}积分抵扣￥{{item.sku.spec_list[0].item_list[0].point_deduct_max_amount||0}}
							</text>
							<!-- 服务行业积分抵扣 -->
							<text class="jifen" style="white-space: nowrap;"
								v-if="item.service.point_deduct_amount != 0&&item.service.point_deduct_amount">
								{{item.service.point_deduct_max_amount/(item.service.point_deduct_amount/100)}}积分抵扣￥{{item.service.point_deduct_max_amount||0}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 购物车按钮 -->
		<view class="image_div" @click="iscart = 1">
			<image src="/static/icon_gwc.png" mode=""></image>
			<view class="icon flex-c">{{cartlist.length}}</view>
		</view>


		<!-- 购物车 -->
		<view class="modal_view" @click.stop="iscart =0" v-if="iscart">
			<view class="modal_view_div" @click.stop="">
				<view class="text flex-cb">
					<view class="flex align-center">
						<!-- <text class="cuIcon-round" v-if="!isall" @click="handleall(1)"></text>
						<text class="cuIcon-roundcheckfill" v-else @click="handleall(0)"></text> -->
						<text>已选商品</text>
					</view>
					<text @click="deteles">清空</text>
				</view>
				<image src="/static/gwczwsp.png" mode="" v-if="cartlist.length == 0"></image>
				<scroll-view scroll-y="true" class="screen-swiper">
					<view class="cart flex-cb" v-for="(item,index) in cartlist" :key="index">
						<view class="flex align-center">
							<!-- <text class="cuIcon-round" v-if="!item.selected" @click="choice(index)"></text>
							<text class="cuIcon-roundcheckfill" v-else @click="choice(index)"></text> -->
							<image :src="url+item.goods_image" mode=""></image>
							<view class="food">
								<text class="food_name">{{item.goods_title + item.goods_spec_item_name}}</text>
								<view class="">{{item.goods_attribute}}</view>
							</view>
						</view>
						<view class="money">
							<text>￥{{item.goods_price}}</text>
							<view class="flex-cb addnum">
								<text class="flex-c A" @click="handle(item,index)">-</text>
								<view class="center_num flex-c">{{item.number}}</view>
								<text class="flex-c B" @click="handleAdd(item,index)">+</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="foot flex-cb">
				<view class="money flex align-center">
					<!-- <image src="/static/gwc(2).png" mode="" @click="iscart = 1"></image> -->
					<text>￥{{money}}</text>
					<!-- <view class="position flex-c">2</view> -->
				</view>
				<view class="button flex-c" @click.stop="navigate">去结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
				money: 0.00,
				isall: 0, //是否全选
				iscart: 0, //购物车显示隐藏
				cartlist: [], //
				selectId: [],
				list: [], //商品列表
				shop: '',
			};
		},
		onLoad(e) {
			this.url = this.$base
			this.shop = JSON.parse(e.e)
			console.log(this.shop, '上层数据');
			// 商家地址
			let dizhi = this.shop.shop_province + this.shop.shop_city + this.shop.shop_district + this.shop.shop_address
			// console.log(this.shop.shop_province);
			uni.setStorage({
				key: 'address',
				data: dizhi,
				success: function() {
					console.log('存储商家地址');
				}
			});
		},
		onReachBottom() {
			this.getcart(this.shop.id)
			this.getlist(this.shop.id)
		},
		onShow() {
			this.getlist(this.shop.id)
			this.getcart(this.shop.id)
			this.isadd = 0
			this.isall = 0
			this.iscart = 0
			this.money = 0.00
			this.selectId = []
		},
		methods: {
			handleall(i) {
				this.selectId = []
				this.money = 0.00
				this.isall = i
				if (i == 1) {
					for (let i = 0; i < this.cartlist.length; i++) {
						this.cartlist[i].selected = 1
						this.money += parseFloat(this.cartlist[i].goods_price) * parseFloat(this.cartlist[i].number)
					}
				} else {
					for (let i = 0; i < this.cartlist.length; i++) {
						this.cartlist[i].selected = 0
					}
					this.money = 0.00
				}
				this.money = this.$utils.changeTwoDecimal_f(this.money)
			},
			handleNavigeta(id) {
				// console.log(this.shop.main_id == 2,id)
				if (this.shop.main_id == 6) {
					uni.navigateTo({
						url: './meifa_details/meifa_details?id=' + id + '&main_id=' + this.shop.main_id
					})
				} else {
					uni.navigateTo({
						url: './food_details?id=' + id
					})
				}
			},
			// 获取商品列表
			getlist(id) {
				this.$api.goods_list({}, id, 1).then(res => { //商品列表
					this.list = res.list
					// console.log(this.list);
				})
			},
			getcart(id) {
				this.$api.cart_list({
					type: 1
				}, id, 1).then(res => { //购物车列表
					console.log(res);
					this.cartlist = res.data
					this.all()
					console.log(this.cartlist);
				})
			},
			handle(num, i) {
				console.log(1);
				this.$api.cart_delete({}, this.cartlist[i].id, 1).then(res => {
					console.log(res);
					if (res.code == 200001) {
						this.money = 0.00
						this.getcart(this.shop.id)
						this.isall = 0
					}
				})
			},
			// 加入购物车
			handleAdd(item, i) {
				let arr = {
					spec_name: item.goods_spec_name,
					spec_item_name: item.goods_spec_item_name,
					attribute_name: item.goods_attribute,
					number: 1,
					type: 2
				}
				console.log('加入购物车', arr, item, i);
				this.$api.ADD_cart(arr,item.goods_id,1).then(res=>{
					console.log(res);
					this.getcart(this.shop.id)
				})
			},
			choice(index) {
				//当再次被选中时，取消当前选中项
				if (this.cartlist[index].selected == true) {
					this.cartlist[index].selected = false;
					this.all()
				} else {
					this.cartlist[index].selected = true;
					this.all()
				}
			},
			all() {
				let istrue = 0
				let t = 0
				for (let i = 0; i < this.cartlist.length; i++) {

					t += parseFloat(this.cartlist[i].goods_price) * parseFloat(this.cartlist[i].number)
				}
				this.money = this.$utils.changeTwoDecimal_f(t)
			},
			deteles() {
				this.$api.cartsClear({
					type: 1
				}, this.shop.id, 1).then(res => {
					console.log(res);
					if (res.code == 200001) {
						// this.money = 0.00
						this.getcart(this.shop.id)
						// this.isall = 0
					}
				})


			},
			navigate() { //购物车结算跳转

				let t = []
				for (let i = 0; i < this.cartlist.length; i++) {
					t[i] = this.cartlist[i]
				}
				if (t.length == 0) {
					uni.showToast({
						title: '请选择商品后结算',
						icon: "none"
					})
					return
				}
				this.iscart = 0
				this.isall = 0
				uni.navigateTo({
					url: './Submit_order?data=' + JSON.stringify(t) + '&shop=' + JSON.stringify(this.shop)
				})
			}
		}
	}
</script>

<style lang="scss">
	.head {
		padding: 38rpx 29rpx 26rpx 40rpx;

		.item {
			width: 710rpx;
			border-radius: 10rpx;

			image {
				width: 208rpx;
				height: 208rpx;
				border-radius: 10rpx;
			}

			.text_div {
				padding-left: 14rpx;
				width: 443rpx;

				.food_name {
					height: 55rpx;
					font-size: 32rpx;
					color: #333;

					.state {
						color: #1CD699;
					}

					.state1 {
						color: #999999;
					}
				}

				.score {
					margin-top: 8rpx;
					margin-bottom: 14rpx;

					text {
						color: #FF6F10;
					}

					.cuIcon-favorfill,
					.num {
						font-size: 26rpx;
					}
				}

				.phone,
				.address {
					font-size: 24rpx;
					color: #999999;
				}

				.address {
					margin-top: 20rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}

	.food_list {
		width: 100vw;
		height: calc(100vh - 272rpx);
		overflow: hidden;

		.food_list_item {
			padding: 0 35rpx 25rpx 35rpx;
			height: 293rpx;

			.div {
				padding-top: 31rpx;

				.text_div {
					.food_name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}

					.food_num {
						font-size: 24rpx;
						color: #999999;
					}

					.button {
						width: 120rpx;
						height: 48rpx;
						background: rgba(255, 145, 0, .21);
						border-radius: 28rpx;
						color: #FF6F10;
						font-size: 22rpx;
						margin-top: 20rpx;
					}

					.price {
						font-size: 26rpx;
						color: #333;
						margin-top: 14rpx;
						margin-bottom: 11rpx;
					}

					.vipPrice {
						color: #FF2E2E;
						font-size: 28rpx;

						.jifen {
							margin-left: 30rpx;
							font-size: 24rpx;
							color: #FF6F10;
						}
					}
				}
			}

			image {
				width: 136rpx;
				height: 136rpx;
				border-radius: 10rpx;
				margin-left: 5rpx;
				margin-right: 14rpx;
			}
		}
	}

	.image_div {
		position: fixed;
		right: 39rpx;
		bottom: 36rpx;

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.icon {
			width: 30rpx;
			height: 30rpx;
			background: #FF6F10;
			border-radius: 50%;
			color: #fff;
			font-size: 22rpx;
			position: absolute;
			right: -10rpx;
			bottom: 50rpx;
		}
	}

	.foot {
		width: 750rpx;
		height: 147rpx;
		background: #fff;
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		padding: 25rpx 20rpx;
	
	.money,
		.button {
			height: 100rpx;

			image {
				width: 50rpx;
				height: 56rpx;
			}

			text {
				font-size: 30rpx;
				margin-left: 31rpx;
				font-weight: bold;
				color: #fff;
			}
		}

		.money {
			width: 572rpx;
			border-radius: 50rpx 0 0 50rpx;
			background: #000;
			padding: 0 22rpx;
			padding-left: 44rpx;
			position: relative;

			.position {
				position: absolute;
				left: 75rpx;
				top: 22rpx;
				border-radius: 50%;
				font-size: 22rpx;
				color: #fff;
				background: #FF6F10;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.button {
			width: 168rpx;
			background: #1CD699;
			border-radius: 0px 50rpx 50rpx 0px;
			color: #fff;
		}
	}

	.modal_view_div {
		width: 750rpx;
		height: 634rpx;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		overflow: hidden;

		.text {
			height: 84rpx;
			background: #F8F8F8;
			padding: 32rpx 22rpx;
		}

		.cuIcon-round,
		.cuIcon-roundcheckfill {
			font-size: 44rpx;
			color: #CCCCCC;
			margin-right: 11rpx;
		}

		.cuIcon-roundcheckfill {
			color: #1CD699;
		}

		image {
			width: 224rpx;
			height: 337rpx;
			margin-top: 31rpx;
		}

		.screen-swiper {
			height: 400rpx;
			padding: 26rpx 36rpx 0 32rpx;

			.cart {
				margin-bottom: 59rpx;
				text-align: left;

				.food {
					width: 240rpx;
				}

				.food_name {
					height: 69rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #252525;
					line-height: 36rpx;
				}

				.addnum {
					width: 187rpx;
					height: 44rpx;
					text-align: right;
					margin-top: 43rpx;
					background: #FFFFFF;
					border-radius: 8rpx;

					text {
						width: 30rpx;
						height: 30rpx;
						border-radius: 10rpx;
						border: 2px solid #e5e5e5;
						font-weight: 600;
						font-size: 30rpx;
					}

					.B {
						background-color: #1CD699;
						color: #fff;
						border: 2px solid #1CD699;
					}

					.center_num {
						width: 99rpx;
						height: 100%;
						// border-left: 2px solid #C3C3C3;
						// border-right: 2px solid #C3C3C3;
					}
				}
			}

			image {
				width: 122rpx;
				height: 122rpx;
				border-radius: 10rpx;
				margin-right: 12rpx;
			}
		}
	}

	scroll-view {}
</style>
